<template>
    <footer class="bg-dark text-gray-300 py-12">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <!-- 关于我们 -->
          <div>
            <h3 class="text-white text-lg font-bold mb-4">关于我们</h3>
            <p class="text-gray-400">
              BookStore是一家专注于提供优质图书的线上书店，致力于为读者提供便捷的购书体验。
            </p>
          </div>
          
          <!-- 快速链接 -->
          <div>
            <h3 class="text-white text-lg font-bold mb-4">快速链接</h3>
            <ul class="space-y-2">
              <li><router-link to="/" class="text-gray-400 hover:text-white transition-colors">首页</router-link></li>
              <li><router-link to="/books" class="text-gray-400 hover:text-white transition-colors">图书</router-link></li>
              <li><router-link to="/cart" class="text-gray-400 hover:text-white transition-colors">购物车</router-link></li>
            </ul>
          </div>
          
          <!-- 客户服务 -->
          <div>
            <h3 class="text-white text-lg font-bold mb-4">客户服务</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">退换货政策</a></li>
            </ul>
          </div>
          
          <!-- 联系信息 -->
          <div>
            <h3 class="text-white text-lg font-bold mb-4">联系我们</h3>
            <ul class="space-y-2">
              <li class="flex items-center">
                <i class="fa fa-map-marker w-5"></i>
                <span class="text-gray-400">北京市朝阳区图书大厦</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-phone w-5"></i>
                <span class="text-gray-400">400-123-4567</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-envelope w-5"></i>
                <span class="text-gray-400">contact@bookstore.com</span>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p class="text-gray-500 text-sm">
            &copy; 2023 BookStore. 保留所有权利。
          </p>
          <div class="flex space-x-4 mt-4 md:mt-0">
            <a href="#" class="text-gray-500 hover:text-white transition-colors">
              <i class="fa fa-facebook"></i>
            </a>
            <a href="#" class="text-gray-500 hover:text-white transition-colors">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="text-gray-500 hover:text-white transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
            <a href="#" class="text-gray-500 hover:text-white transition-colors">
              <i class="fa fa-linkedin"></i>
            </a>
          </div>
        </div>
      </div>
    </footer>
  </template>
  
  <script setup>
  </script>
  
  <style scoped>
  </style>